﻿@{
    ViewBag.Title = "Научно-методические достижения";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="books">
	<img src="/Content/pic/books.png" usemap="#BooksMap">
	<p>
		<map id="BooksMap" name="BooksMap">
			<area shape="poly" alt="" title="1" coords="179,49,284,47,282,200,170,200" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="1"/>
			<area shape="poly" alt="" title="2" coords="290,55,384,56,381,200,284,202,283,200" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="2"/>
			<area shape="poly" alt="" title="3" coords="385,52,478,53,480,200,380,201" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="3"/>
			<area shape="poly" alt="" title="4" coords="465,48,562,45,569,49,570,201,481,200,480,54,461,54" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="4"/>
			<area shape="poly" alt="" title="5" coords="572,61,652,62,656,200,570,200" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="5"/>
			<area shape="poly" alt="" title="6" coords="626,54,727,55,737,201,656,200,654,61,622,60" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="6"/>
			<area shape="poly" alt="" title="7" coords="184,218,289,221,293,221,293,227,262,227,259,372,168,370,183,232" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="7"/>
			<area shape="poly" alt="" title="8" coords="349,227,263,232,265,372,348,370" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="8"/>
			<area shape="poly" alt="" title="9" coords="349,229,413,229,412,370,349,372" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="9"/>
			<area shape="poly" alt="" title="10" coords="414,224,486,225,486,370,414,373,412,358" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="10"/>
			<area shape="poly" alt="" title="11" coords="486,225,554,225,556,372,486,372" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="11"/>
			<area shape="poly" alt="" title="12" coords="556,225,609,226,615,370,555,372" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="12"/>
			<area shape="poly" alt="" title="13" coords="610,222,718,224,728,370,617,369" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="13"/>
			<area shape="poly" alt="" title="14" coords="191,400,267,401,261,540,178,541" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="14"/>
			<area shape="poly" alt="" title="15" coords="268,400,339,401,335,541,259,540" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="15"/>
			<area shape="poly" alt="" title="16" coords="339,401,404,401,405,541,336,539,334,518" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="16"/>
			<area shape="poly" alt="" title="17" coords="405,401,474,402,475,540,404,539" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="17"/>
			<area shape="poly" alt="" title="18" coords="475,401,552,402,556,541,475,539" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="18"/>
			<area shape="poly" alt="" title="19" coords="554,399,614,399,623,541,555,541,553,529" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="19"/>
			<area shape="poly" alt="" title="20" coords="624,400,708,401,718,540,623,541,613,413" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="20"/>
			<area shape="poly" alt="" title="21" coords="190,563,243,564,233,714,175,714" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="21"/>
			<area shape="poly" alt="" title="22" coords="245,563,347,563,348,569,293,569,287,714,229,713" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="22"/>
			<area shape="poly" alt="" title="23" coords="369,568,294,571,287,715,366,715" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="23"/>
			<area shape="poly" alt="" title="24" coords="371,566,455,568,454,715,363,715,361,710" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="24"/>
			<area shape="poly" alt="" title="25" coords="456,564,522,565,522,565,526,713,456,714,455,702" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="25"/>
			<area shape="poly" alt="" title="26" coords="527,564,604,565,612,715,527,715" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="26"/>
			<area shape="poly" alt="" title="27" coords="607,563,712,564,724,715,613,714" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="27"/>
			<!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) -->
		</map>
	</p>
</div>
<div class="books">
	<img src="/Content/pic/books2.png" usemap="#BooksMap2">
	<p>
		<map id="BooksMap2" name="BooksMap2">
		    <area shape="poly" alt="" title="28" coords="181,56,241,55,232,164,191,163,190,202,164,202,180,55,187,56" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="28" />
		    <area shape="poly" alt="" title="29" coords="242,56,309,56,302,201,287,200,288,164,240,163" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="29" />
		    <area shape="poly" alt="" title="30" coords="309,54,392,54,389,202,299,201" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="30" />
		    <area shape="poly" alt="" title="31" coords="393,54,468,55,468,200,384,202" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="31" />
		    <area shape="poly" alt="" title="32" coords="469,54,550,55,551,202,466,205" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="32" />
		    <area shape="poly" alt="" title="33" coords="552,53,620,55,630,203,552,203" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="33" />
		    <area shape="poly" alt="" title="34" coords="725,54,622,56,630,203,737,204" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="34" />
		    <area shape="poly" alt="" title="35" coords="188,232,285,233,274,375,170,377" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="35" />
		    <area shape="poly" alt="" title="36" coords="287,225,389,227,386,375,280,374" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="36" />
		    <area shape="poly" alt="" title="37" coords="407,224,506,227,511,377,401,375" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="37" />
		    <area shape="poly" alt="" title="38" coords="520,227,609,225,623,335,582,334,584,372,523,375" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="38" />
		    <area shape="poly" alt="" title="39" coords="719,225,730,374,683,375,680,331,620,334,622,224" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="39" />
		    <area shape="poly" alt="" title="40" coords="179,395,286,395,280,503,189,506,187,539,168,541" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="40" />
		    <area shape="poly" alt="" title="41" coords="287,403,377,404,375,543,282,543" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="41" />
		    <area shape="poly" alt="" title="42" coords="378,396,482,397,485,543,376,543,377,482" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="42" />
            <area shape="poly" alt="" title="43" coords="516,394,618,395,624,504,588,508,589,543,515,542" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="43" />
		    <area shape="poly" alt="" title="44" coords="623,392,726,395,735,544,689,543,685,503,625,506" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="44" />
		    <area shape="poly" alt="" title="45" coords="177,568,269,569,266,680,188,679,187,718,164,717" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="45" />
		    <area shape="poly" alt="" title="46" coords="271,570,371,566,372,573,374,579,352,579,354,719,283,718,286,677,269,679" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="46" />
		    <area shape="poly" alt="" title="47" coords="439,576,354,580,354,717,438,717" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="47" />
		    <area shape="poly" alt="" title="48" coords="440,573,521,571,522,719,439,719" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="48" />
		    <area shape="poly" alt="" title="49" coords="522,569,616,571,622,715,523,719" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="49" />
		    <area shape="poly" alt="" title="50" coords="623,568,722,571,730,716,624,718" href="#" target="" data-toggle="modal" data-target="#myModal" data-id="50" />
			<!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) -->
		</map>
	</p>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body" id="modalBody">
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    Закрыть</button>
            </div>
        </div>
    </div>
</div>

<script>
    $('#myModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget); // Button that triggered the modal
        var id = button.data('id'); // Extract info from data-* attributes
        
        $.ajax({
            url:"/Museum/Publication?id=" + id,
//              "@Url.Action("Person", "Archive", new { id = 3 })",
            cache: false
        })
            .done(function (html) {
                $("#modalBody").html(html);
            });;
    })

</script>


